import {defineComponent, reactive, ref} from "vue";
import style from "@/page/portal/mine/comp/css/collect.module.css";
import {userStore} from "@/stores/user";
import {ElMessage} from "element-plus";
import {removeToken} from "@/utils/auth";
import {useRouter} from "vue-router";

export default defineComponent({
    setup() {
        const router = useRouter()
        const user_store = userStore()

        const formRef = ref(null)
        const formInput = reactive({
            password: '',
            password1: '',
            password2: ''
        })
        const rules = reactive({
            password: [
                {required: true, message: '请输入原始', trigger: 'blur'},
            ],
            password1: [
                {required: true, message: '请输入新密码', trigger: 'blur'},
            ],
            password2: [
                {required: true, message: '请输入再次输入密码', trigger: 'blur'},
                {
                    validator: (rule, value, callback) => {
                        if (value !== formInput.password1) {
                            callback(new Error('两次输入密码不一致!'));
                        } else {
                            callback();
                        }
                    }, trigger: 'blur'
                }]
        })
        const handleSave = () => {
            formRef.value.validate(async (valid, fields) => {
                if (valid) {
                    const {code} = await user_store.updatePassword(formInput.password, formInput.password2)
                    if(code === 0){
                        ElMessage.success('修改成功,请重新登陆')
                        removeToken()
                        router.replace("/login")
                    }
                }
            })
        }


        return () => {
            return <>
                <div className={style.title} style={{marginBottom: '20px'}}>修改密码</div>
                <el-form model={formInput}
                         ref={formRef}
                         rules={rules}
                         label-width={'120px'}>
                    <el-form-item label={'输入原始密码'} prop={'password'}>
                        <el-input style={{width: '200px', marginRight: '10px'}} size={'small'}
                                  v-model={formInput.password}
                                  type={'password'}
                                  placeholder={'请输入新密码'}/>
                    </el-form-item>
                    <el-form-item label={'输入新密码'} prop={'password1'}>
                        <el-input style={{width: '200px', marginRight: '10px'}} size={'small'}
                                  v-model={formInput.password1}
                                  type={'password'}
                                  placeholder={'请输入新密码'}/>
                    </el-form-item>
                    <el-form-item label={'再次输入密码'} prop={'password2'}>
                        <el-input style={{width: '200px', marginRight: '10px'}} size={'small'}
                                  v-model={formInput.password2}
                                  type={'password'}
                                  placeholder={'请输入再次输入密码'}/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type={'primary'} size={'small'} onClick={handleSave}>保存</el-button>
                    </el-form-item>
                </el-form>

            </>
        }
    }
})